const path = require('path');

//清除多余的js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//清除多余的.LICENSE.txt
const TerserPlugin = require('terser-webpack-plugin');
//处理CSS
const MinCssExtractPlugin = require('mini-css-extract-plugin');
//处理HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
//WebpackServer全局变量
const webpack = require('webpack');

var getHtmlConfig = function(name){
    return {
        template : './src/view/' + name +'.html',
        filename : 'view/' + name +'.html',
        //自动注入公共部分
        inject   : true,
        //生成版本号
        hash     : true,
        //entry中的信息都会用到(添加common会使其变成一个公用的部分，每一个都会引用进去)
        chunks   : ['common',name],
        //html格式化处理
        minify   : {
            collapseWhitespace : false
        }
    }
}

module.exports = {
    //每个文件夹Js的入口
    entry : {
        'cart'              :['./src/page/cart/index.js'],
        'index'             :['./src/page/index/index.js'],
        'common'            :['./src/page/common/index.js'],
        'user-login'        :['./src/page/user-login/index.js'],
        'catalog-main'      :['./src/page/catalog-main/index.js'],
        'catalog-list'      :['./src/page/catalog-list/index.js'],
        'user-register'     :['./src/page/user-register/index.js'],
        'cart-checkout'     :['./src/page/cart-checkout/index.js'],
        'catalog-detail'    :['./src/page/catalog-detail/index.js'],
        'order-confirm'     :['./src/page/order-confirm/index.js'],
        'order-shipping'    :['./src/page/order-shipping/index.js'],
        'order-view'        :['./src/page/order-view/index.js'],
        'user-account'      :['./src/page/user-account/index.js'],

    },
    output : {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    //WebpackServer的相关配置
    devServer :{
        port : 8888,
        contentBase : path.resolve(__dirname,'dist')
    },
    module : {
        rules : [
            {
                test: /\.css$/, 
                use: [
                     {
                        loader : MinCssExtractPlugin.loader,
                        options : {
                            publicPath : '../'
                        }
                     }, 
                    'css-loader'
                ],
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/i,
                use :{
                    loader : 'url-loader',
                    options: {
                        name     : 'images/[name].[ext]',
                        limit    : 10,
                        esModule :false
                    }
                }
                // test: /\.(png|svg|jpg|gif)$/, 

                //type: 'asset/resource',
            },
            {
                test: /\.(htm|string)$/,
                use: {
                    loader : 'html-loader',
                    options: {
                        esModule : false,
                        minimize : false,
                    }
                }
            },
        ]
    },
    plugins: [
        //new CleanWebpackPlugin(),
        new MinCssExtractPlugin({
            filename : 'css/[name].css'
        }),
        //新建HTML在这里处理
        new HtmlWebpackPlugin(getHtmlConfig('cart')),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('user-login')),
        new HtmlWebpackPlugin(getHtmlConfig('user-register')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-list')),
        new HtmlWebpackPlugin(getHtmlConfig('cart-checkout')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-detail')),
        new HtmlWebpackPlugin(getHtmlConfig('order-confirm')),
        new HtmlWebpackPlugin(getHtmlConfig('order-shipping')),
        new HtmlWebpackPlugin(getHtmlConfig('order-view')),
        new HtmlWebpackPlugin(getHtmlConfig('user-account')),
        //热更新的插件对象
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization : {
        minimize:false,
        minimizer: [
            new TerserPlugin({
                extractComments:false,
            })
        ],
        //公共部分的打包
        splitChunks : {
            cacheGroups : {
                common : {
                //希望打包的代码文件名
                name : 'util',
                //处理什么代码
                chunks : 'all',
                //至少被两个文件引用过
                minChunks : 2,
                minSize : 0
                },
                vendors : {

                }
            },
        }
    },
    externals : {
        'jquery' : 'window.jQuery'
    },
    resolve : {
        alias : {
            // dirname 表示绝对地址前面一串目录
            util         : __dirname + '/src/util',
            view         : __dirname + '/src/view',
            page         : __dirname + '/src/page',
            images       : __dirname + '/src/images',
            service      : __dirname + '/src/service',
            node_modules : __dirname + '/node_modules',

        }
    }
};